<script>
export default salesOutbound;

import salesOutbound from "./index";
</script>
<!--src 引用css样式-->
<style src="./index.css" lang="css"></style>

<template>
  <div class="brand-wrapper">
    <!--搜索功能-->
    <div class="search-form">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="销售出库订单号" size="mini">
          <el-input placeholder="销售出库订单号" v-model="searchParams.salesOutOrderId"></el-input>
        </el-form-item>
        <el-form-item label="订单类型" size="mini">
          <template>
            <el-select v-model="searchParams.orderType" placeholder="请选择">
              <el-option
                  v-for="(key) in options[6]"
                  :key="key"
                  :label="key"
                  :value="key">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="支付方式" size="mini">
          <template>
            <el-select v-model="searchParams.payType" placeholder="请选择">
              <el-option
                  v-for="(key) in options[5]"
                  :key="key"
                  :label="key"
                  :value="key">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="会员账号" size="mini">
          <el-input placeholder="会员账号" v-model="searchParams.vipAccount"></el-input>
        </el-form-item>

        <el-form-item label="日期选项" size="mini">
          <!--日期组件-->
          <el-date-picker
              v-model="pickerOptions.startDate"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              @change="chooseTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态" size="mini">
          <template>
            <el-select v-model="searchParams.orderStatus" placeholder="请选择">
              <el-option
                  v-for="(key) in options[2]"
                  :key="key"
                  :label="key"
                  :value="key">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
    </div>
    <!--查询按钮-->

    <div class="crud-box">
      <el-button type="success" icon="el-icon-edit" size="mini" @click="searchPage()">查询</el-button>
      <el-button type="danger" icon="el-icon-download" size="mini" @click="createBatchExcel">生成出库单</el-button>
      <el-button type="info" icon="el-icon-refresh" size="mini" @click="resetForm()">重置</el-button>
      <el-button type="info" icon="el-icon-refresh" size="mini" @click="openBuy()">打开销售出库管理</el-button>
    </div>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="80%">
      <outBound></outBound>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </el-dialog>

    <!--table表格-->
    <div class="table-box">

      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange">
        <el-table-column
            type="selection"
            width="55" align="center"
            :selectable="selectTable">
        </el-table-column>
<!--        prop="detailOrderId"-->
        <el-table-column
            type="index"
            label="序号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="salesOutOrderId"
            label="销售出库订单号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="orderType"
            label="订单类型"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="payType"
            label="支付方式" align="center">
        </el-table-column>
        <el-table-column
            prop="vipAccount"
            label="会员账号" align="center">
        </el-table-column>
        <el-table-column
            prop="orderStatus"
            label="订单状态" align="center">
          <template slot-scope="scope">
            <el-tag>
              {{scope.row.orderStatus}}
            </el-tag>
          </template>

        </el-table-column>
        <el-table-column
            prop="orderDate"
            label="订单日期" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="obj">
            <el-button type="primary" size="mini"
                       @click="lookOrder(obj.row.detailOrderId)"
                       style="margin-right: 5px">查看</el-button>

            <el-link type="success" :href="`http://localhost:8088/stockOut/create/${obj.row.detailOrderId}`">
              <el-button type="success" size="mini" style="margin-top:-20px" v-if="obj.row.orderStatus==='已出库'">生成出库单</el-button>
            </el-link>
<!--              <el-button type="success" size="mini" style="margin-top:-20px" v-if="obj.row.orderStatus=='已出库'">生成入库单</el-button>-->

<!--              <el-button type="success" size="mini"-->
<!--                         @click="$router.push(`/stockOut/create/${obj.row.id}`)"-->
<!--                         style="margin-right: 5px" v-if="obj.row.orderStatus=='已出库'">生成入库单</el-button>-->
<!--              <el-button type="success" size="mini"-->
<!--                         @click="downExcel(obj.row.id)"-->
<!--                         style="margin-right: 5px" v-if="obj.row.orderStatus=='已出库'">生成入库单</el-button>-->

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="page-box">
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          :total="total" align="right">
      </el-pagination>
    </div>
  </div>
</template>
